{% extends "base/index.html" %}

{% block css %}
    <link rel="stylesheet" href="/static/select2/dist/css/select2.min.css">
    <link href="/static/Datepicker/css/foundation-datepicker.css" rel="stylesheet" type="text/css">

{% endblock %}

{% block center %}
    <!-- 信息盒子 -->
    <div class="panel panel-default center-top" style="margin-bottom:15px;min-width:auto">
        <div class="panel-heading">
            <div class="row" style="padding-top:5px;padding-left:10px;">
                <div class="col-sm-3" style="display:inline-block;margin-bottom:5px;">
                    <a href="" class="btn btn-sm btn-success" data-toggle="modal" data-target="#assetModal">添加</a>
                    <a href="" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#importModal">导入</a>
                </div>
                <div class="col-sm-6" style="display:inline-block">
                    <div style="width:200px;display: inline-block;">
                        <select class="form-control" id="select-hostgroup">
                            <option value="host_group">主机组</option>
                            {% for i in group_obj %}
                                <option value="{{ i.id }}">{{ i.group_name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div style="width:200px;display: inline-block;">
                        <select class="form-control" id="select-idc">
                            <option value="host_idc">机房</option>
                            {% for i in idc_obj %}
                                <option value="{{ i.id }}">{{ i.idc_name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div style="width:200px;display: inline-block;">
                        <select class="form-control" id="select-asset-type">
                            <option value="host_type">服务器类型</option>
                            <option value="服务器">服务器</option>
                            <option value="路由器">路由器</option>
                            <option value="交换机">交换机</option>
                            <option value="防火墙">防火墙</option>
                        </select>
                    </div>

                </div>
                <div class="col-sm-3" style="display:inline-block;">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for key ..." id="search-key">
                        <span class="input-group-btn">
            <button class="btn btn-primary" type="button" id="sub-search">搜索</button>
            <button class="btn btn-success" type="button" style="margin-left:5px" id="export-asset">导出</button>
          </span>
                    </div><!-- /input-group -->
                </div>
            </div>
        </div>
        <div class="panel-body" id="asset-info">
            <table class="table table-hover" style="margin-top:5px;">
                <thead>
                <tr style="background-color: #f5f5f5;">
                    <th>ID</th>
                    <th>IP</th>
                    <th>分组</th>
                    <th>备注</th>
                    <th>机房</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="asset_table">
                {% for i in data_list %}
                    <tr name="tbody">
                        <td>{{ i.id }}</td>
                        <td>{{ i.admin_ip }}</td>
                        <td>{{ i.asset_group.group_name }}</td>
                        <td>{{ i.asset_msg }}</td>
                        <td>{{ i.idc.idc_name }}</td>
                        <td>
                            {% if i.asset_status == "RUN" %}
                                <a href="javascript:;" style="text-decoration:none; color: #00a65a"
                                   data-toggle="tooltip" data-placement="top" title="可连接"><span
                                        class="fa fa-lg fa-power-off"></span> </a>
                            {% elif i.asset_status == "RECYCLE" %}
                                <a><span class="label label-warning">回收</span></a>
                            {% else %}
                                <a href="javascript:;" name="add-connect" asset_id="{{ i.id }}"
                                   style="text-decoration:none;color: #7a869d" data-toggle="tooltip"
                                   data-placement="top" title="未同步"><span class="fa fa-lg fa-power-off"></span> </a>
                            {% endif %}
                        </td>
                        <td style="padding-left:5px;">
                            <a href="javascript:;" name="edit-asset" asset_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="top" title="修改"><span class="fa fa-pencil"></span></a>&nbsp;&nbsp;&nbsp;
                            <a href="/cmdb/assetdetail/{{ i.id }}/" name="info-asset" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="top" title="详情信息"><span
                                    class="fa fa-info-circle"></span> </a>&nbsp;&nbsp;&nbsp;
                            <a href="javascript:;" name="del-asset" asset_id="{{ i.id }}" style="text-decoration:none;"
                               data-toggle="tooltip" data-placement="top" title="删除"><span
                                    class="fa fa-trash"></span></a>&nbsp;&nbsp;

                            <a href="javascript:;" name="recycling" asset_id="{{ i.id }}"
                               style="text-decoration:none;" data-toggle="tooltip" data-placement="top"
                               title="回收"><span class="fa fa-recycle"></span></a>&nbsp;&nbsp;

                            <a href="/ws/{{ i.id }}/" target="_blank" name="zbx-asset" asset_id="{{ i.id }}"
                               style="text-decoration:none;" data-toggle="tooltip" data-placement="top"
                               title="webssh"><span class="fa fa-desktop"></span></a>&nbsp;&nbsp;

                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <div class="text-right" style="margin-top:-30px;padding-right:9%">
                <ul class="pagination" id="pager">
                    <li class="previous"><a href="/cmdb/asset/1/">首页</a></li>
                    {#上一页按钮开始#}
                    {# 如果当前页有上一页#}
                    {% if data_list.has_previous %}
                        {#  当前页的上一页按钮正常使用#}
                        <li class="previous"><a href="/cmdb/asset/{{ data_list.previous_page_number }}/">上一页</a></li>
                    {% else %}
                        {# 当前页的不存在上一页时,上一页的按钮不可用#}
                        <li class="previous disabled"><a href="javascript:;">上一页</a></li>
                    {% endif %}
                    {#上一页按钮结束#}
                    {# 页码开始#}
                    {% for num in page_list %}
                        {% if num == currentPage %}
                            <li class="item active"><a href="/cmdb/asset/{{ num }}/">{{ num }}</a></li>
                        {% else %}
                            <li class="item"><a href="/cmdb/asset/{{ num }}/">{{ num }}</a></li>
                        {% endif %}
                    {% endfor %}
                    {#页码结束#}
                    {# 下一页按钮开始#}
                    {% if data_list.has_next %}
                        <li class="next"><a href="/cmdb/asset/{{ data_list.next_page_number }}/">下一页</a></li>
                    {% else %}
                        <li class="next disabled"><a href="javascript:;">下一页</a></li>
                    {% endif %}
                    <li class="previous"><a href="/cmdb/asset/{{ page_nums }}/">尾页</a></li>
                    {# 下一页按钮结束#}
                </ul>
            </div>

        </div>
    </div>

{% endblock %}


{% block modal %}

    <!--添加主机模态框-->
    <div class="modal fade" id="assetModal" tabindex="-1" role="dialog" aria-labelledby="assetModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:100px;width: 750px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="assetModalLabel">添加资产</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label><span style="color: red"> * </span>管理IP</label>
                                <input class="form-control" placeholder="IP地址" id="admin-ip">
                            </div>
                            <div class="form-group">
                                <label>备注</label>
                                <input class="form-control" placeholder="备注" id="asset-msg">
                            </div>

                            <div class="form-group">
                                <label>分组</label>
                                <select id="asset-group" class="form-control">
                                    {% for i in group_obj %}
                                        <option value="{{ i.id }}">{{ i.group_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="form-group">
                                <label>IDC</label>
                                <select id="asset-idc" class="form-control">
                                    {% for i in idc_obj %}
                                        <option value="{{ i.id }}">{{ i.idc_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>


                        <div class="col-sm-6">
                            <div class="form-group">
                                <label><span style="color: red"> * </span>远程端口</label>
                                <input class="form-control" placeholder="远程端口" value="22" id="login-port">
                            </div>
                            <div class="form-group">
                                <label><span style="color: red"> * </span>管理账号</label>
                                <input class="form-control" placeholder="管理账号" value="root" id="login-user">
                            </div>
                            <div class="form-group">
                                <label><span style="color: red"> * </span>管理密码</label>
                                <input class="form-control" type="password" placeholder="管理密码" id="login-passwd">
                            </div>
                            <div class="form-group">
                                <label><span style="color: red"> * </span>认证方式</label>
                                <select id="connect-method" class="form-control">
                                    <option value="passwd">密码</option>
                                    <option value="key">密钥</option>
                                </select>
                            </div>

                        </div>

                        <div class="col-sm-12">
                            <div class="form-group">
                                <label><span style="color: red"></span>私钥</label>
                                <textarea class="form-control" name="" id="login-id-rsa" cols="30" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-asset">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!--修改主机模态框-->
    <div class="modal fade" id="edit-assetModal" tabindex="-1" role="dialog" aria-labelledby="edit-assetModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:100px;width: 750px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="edit-assetModalLabel">修改资产</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>管理IP</label>
                                <input class="form-control" placeholder="IP地址" id="edit-admin-ip">
                            </div>
                            <div class="form-group">
                                <label>备注</label>
                                <input class="form-control" placeholder="备注" id="edit-asset-msg">
                            </div>
                            <div class="form-group">
                                <label>主机组</label>
                                <select id="edit-asset-group" class="form-control">
                                    {% for i in group_obj %}
                                        <option value="{{ i.id }}">{{ i.group_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="form-group">
                                <label>IDC</label>
                                <select id="edit-asset-idc" class="form-control">
                                    {% for i in idc_obj %}
                                        <option value="{{ i.id }}">{{ i.idc_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label>远程端口</label>
                                <input class="form-control" placeholder="远程端口" id="edit-login-port">
                            </div>
                            <div class="form-group">
                                <label>管理账号</label>
                                <input class="form-control" placeholder="管理账号" id="edit-login-user">
                            </div>
                            <div class="form-group">
                                <label>管理密码</label>
                                <input class="form-control" type="password" placeholder="管理密码" id="edit-login-passwd">
                            </div>
                            <div class="form-group">
                                <label>登陆方式</label>
                                <select id="edit-connect-method" class="form-control">
                                    <option value="passwd">密码</option>
                                    <option value="key">密钥</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                    <label><span style="color: red"></span>私钥</label>
                                    <textarea class="form-control" name="" id="edit-login-id-rsa" cols="30"
                                              rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-edit-asset">提交</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:150px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="importModalLabel">导入服务器信息</h4>
                </div>
                <div class="modal-body" style="height: 54px;">
                    <form method="post" action="/cmdb/uploadasset/" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="input-group" style="margin-bottom: 10px;">
                            <input id="photoCover" type="file" name="upload_file" class="input-large form-control">
                            <span class="input-group-btn">
                                <a class="btn btn-success" href="/static/medias/template/asset_template.xlsx">模版下载</a>
                            </span>
                        </div>
                        <button type="submit" class="btn btn-primary pull-right form-control" id="sub-import-asset">提交
                        </button>
                    </form>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabe">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:150px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="importModalLabe">导出成功</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <a class="btn btn-success" href="/static/medias/download/cmdb.xlsx">点此下载</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="zabbixModal" tabindex="-1" role="dialog" aria-labelledby="zabbixModalLabe">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="margin-top:150px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="zabbixModalLabe">添加zabbix</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Host name</label>
                                <input class="form-control" placeholder="Host name" id="zbx-host-name">
                            </div>
                            <div class="form-group">
                                <label>Visible name</label>
                                <input class="form-control" placeholder="Visible name" id="zbx-vs-name">
                            </div>
                            <div class="form-group">
                                <label>Groups</label>
                                <br>
                                <select class="form-control" id="zbx-group">
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Agent interfaces</label>
                                <input class="form-control" placeholder="Agent interfaces" id="zbx-ag-interface">
                            </div>
                            <div class="form-group">
                                <label>Port</label>
                                <input class="form-control" placeholder="Port" id="zbx-port" value="10050">
                            </div>
                            <div class="form-group">
                                <label> Templates</label>
                                <select class="form-control" id="zbx-template"></select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="sub-zabbix">提交</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}

<script type="text/javascript" src="/static/mystyle/js/cmdb.js"></script>
<script type="text/javascript" src="/static/select2/dist/js/select2.min.js"></script>
<script src="/static/Datepicker/js/foundation-datepicker.js"></script>
<script src="/static/Datepicker/js/locales/foundation-datepicker.zh-CN.js"></script>
<script>

    $('#buy-time').fdatepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        pickTime: true,
    });


    $('#edit-buy-time').fdatepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        pickTime: true,
    });

    $('#use-cycle').fdatepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        pickTime: true,
    });


    $('#edit-use-cycle').fdatepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        pickTime: true,
    });


    $("td a[name='add-zabbix']").click(function () {
        var host_id = $(this).attr("asset_id");
        $.post("/cmdb/zabbix/", {"host_id": host_id, "action": "get"}, function (data) {
            var ret = eval('(' + data + ')');
            $("#zbx-host-name").val(ret.host_ip);
            $("#zbx-vs-name").val(ret.admin_ip + "_" + ret.group + "_" + ret.host_msg);
            $("#zbx-group").select2({
                multiple: true,
                data: ret.host_group,
            });
            $("#zbx-group").val(ret.group_tag_list).trigger('change');
            $("#zbx-template").select2({
                multiple: true,
                data: ret.template_list
            });
            $("#zbx-template").val(ret.tmp_tag_list).trigger('change');
            $("#zbx-ag-interface").val(ret.admin_ip);
            $("#sub-zabbix").attr("host_id", host_id);
        });
        $("#zabbixModal").modal("show");
    });

    $("#sub-zabbix").click(function () {
        var host_id = $(this).attr("host_id");
        var host_name = $("#zbx-host-name").val();
        var vs_name = $("#zbx-vs-name").val();
        var zbx_group = $("#zbx-group").select2("val");
        var zbx_template = $("#zbx-template").select2("val");
        var zbx_interface = $("#zbx-ag-interface").val();
        var zbx_port = $("#zbx-port").val();

        $.post("/cmdb/zabbix/", {
                "host_id": host_id,
                "host_name": host_name,
                "vs_name": vs_name,
                "action": "add",
                "zbx_group": JSON.stringify(zbx_group),
                "zbx_template": JSON.stringify(zbx_template),
                "zbx_interface": zbx_interface,
                "zbx_port": zbx_port
            },
            function (data) {
                var ret = eval('(' + data + ')');
                if (ret.status == "False") {
                    spop({
                        template: ret.info,
                        style: 'warning',
                        autoclose: 5000
                    });
                } else {
                    $("#zabbixModal").modal("hide");
                    spop({
                        template: ret.info,
                        style: 'success',
                        autoclose: 2000
                    });
                    setTimeout("location.reload()", 2000);
                }
            })
    });


</script>

{% endblock %}
